<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js9.2 BOM window对象演示</title>
	</head>
	<body>
		
		<button id="btn1" onclick="newWindow()">打开新窗口</button>
		<button id="btn2" onclick="validClosed()">验证窗口是否关闭</button>
		<button id="btn3" onclick="showInnerSize()">显示窗口的innerWidth和innerHeight</button>
		<button id="btn3" onclick="showOuterSize()">显示窗口的outerWidth和outerHeight</button>
		<button type="button" onclick="useOpener()">打开新窗口使用window.opener</button>
 		 <br  />
		<iframe id="ifm1" src="1.html">
			
		</iframe>
		<iframe id="ifm1" src="2.html">
			
		</iframe>
		<iframe id="ifm1" src="3.html">
			
		</iframe>
		<br  />
		<a href="http://baidu.com" target="_blank">打开百度</a>
		<script type="text/javascript">
			console.log("当前页面的iframe框架数量为");
			console.log(window.frames.length);
			
			var window1;
			function newWindow(){
				// window.open 会打开指定url的新页面
				// 返回值为新页面的window对象
				window1 = window.open("http://www.baidu.com");
			}
			
			// validClosed函数用于演示window.closed，此属性表示窗口是否被关闭
			function validClosed(){
				if(window1.closed){
					alert("弹出的窗口已关闭");
				}else{
					alert("弹出的窗口未关闭");
				}
				
			}
			
			function showInnerSize(){
				// 该尺寸随窗体缩放而改变。以像素计算。不包含菜单栏、工具栏以及滚动条等的高度
				alert("当前window的innerHeight=" + window.innerHeight + ";当前window的innerWidth=" + window.innerWidth);
			}
			
			function showOuterSize(){
				// 该尺寸随窗体缩放而改变。以像素计算。浏览器的总宽高
				alert("当前window的outerHeight=" + window.outerHeight + ";当前window的outerWidth=" + window.outerWidth);
			}
			
			function useOpener(){
				var myWindow = window.open('http://baidu.com')
				myWindow.document.write("This is 'myWindow'")
				myWindow.focus()
				myWindow.document.write("<h3>生成此页面的 url=" + myWindow.opener.location.href + "</h3>");
			}
			 
		</script>
	</body>
</html>
